<template>
  <div class="common-layout">
    <el-container class="lay-container">
      <CommonAside />
      <el-container class="r-container">
        <CommonHeader :condition="conditions"/>
        <el-main>
          <div>
            <ElForm :inline="true">
              <ElFormItem>
                <ElInput v-model="userInfo.username" placeholder="账号"></ElInput>
              </ElFormItem>
              <ElFormItem>
                <ElButton @click="getData" type="primary">查询</ElButton>
              </ElFormItem>
              <ElFormItem>
                <ElButton v-if="butten" @click="increment" type="info">{{ buttens.butten1 }}</ElButton>
                <ElButton v-if="!butten" @click="increment" type="info">{{ buttens.butten2 }}</ElButton>
              </ElFormItem>
            </ElForm>
          </div>

          <div>
            <el-table v-if="butten" :data="tableData1" style="width: 70%">
              <!-- <el-table-column fixed prop="tbUser.uid" label="uid" width="50" /> -->
              <el-table-column prop="tbUser.username" label="账号" width="120" />
              <el-table-column prop="tbUserInfo.nickname" label="账号名" width="120" />
              <el-table-column prop="tbUserInfo.sex" label="性别" width="70" />
              <el-table-column prop="tbRole.roleName" label="角色" width="120" />
              <el-table-column prop="tbRole.roleInfo" label="角色介绍" width="120" />
              <el-table-column prop="tbUser.deleted" label="是否冻结" width="120" />
              <el-table-column fixed="right" label="Operations" width="120">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="deletes(scope.row)">冻结</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-table v-if="!butten" :data="tableData2" style="width: 70%">
              <!-- <el-table-column fixed prop="uid" label="uid" width="50" /> -->
              <el-table-column prop="username" label="账号" width="120" />
              <el-table-column prop="deleted" label="是否冻结" width="120" />
              <el-table-column fixed="right" label="Operations" width="120">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="update(scope.row)">取消冻结</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <hr />
          <PageComp v-if="butten" :page="pageInfo1" @page-change="getData"></PageComp>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ElContainer, ElTable, ElTableColumn, ElMain, ElButton, ElFormItem, ElInput, ElForm, ElMessageBox } from 'element-plus'
import CommonHeader from '../../components/CommonHeader.vue'
import CommonAside from '../../components/CommonAside.vue'
import PageComp from '../../components/PageComp.vue'
import { ref } from 'vue'
import { L12030 } from '../../api/L12030'
import { BaseResult, BaselistResult } from '../../ts/BaseResult'
import TbUser, { UserInfo } from '../../ts/UserInfo'
import { PageInfo } from '../../ts/BaseResult'
import { Tools } from '../../ts/Tools'
import { storeToRefs } from 'pinia'
import store from '../../store/freeze'
const conditions=ref("后端")
const updates = ref({
  uid: '',
  deleted: 'n',
})
const { butten } = storeToRefs(store())
const { increment } = store()
const tableData1 = ref([])
const tableData2 = ref([])
const pageInfo1 = ref(new PageInfo())
const pageInfo2 = ref(new PageInfo())
const userInfo = ref({
  username: '',
  deleted: '',
})
const user = ref({
  deleted: 'y',
})
const buttens = ref({
  butten1: '冻结名单',
  butten2: '正常名单',
})

function update(info: TbUser) {
  ElMessageBox.confirm(`是否解冻${info.username}`, '解冻用户').then(() => {
    L12030.put(`/user/${info.uid}`, updates.value, (data: BaseResult) => {
      if (data.success) {
        ElMessageBox.alert(data.message)
        getDa()
      }
      ElMessageBox.alert(data.message)
    })
  })
}

function deletes(info: TbUser) {
  ElMessageBox.confirm(`是否冻结${info.username}`, '冻结用户').then(() => {
    L12030.delete(`/user/${info.uid}`, {}, (data: BaseResult) => {
      if (data.success) {
        ElMessageBox.alert(data.message)
        getData()
      }
      ElMessageBox.alert(data.message)
    })
  })
}

function getData() {
  L12030.get('/userinfo', Tools.concatJson(pageInfo1.value, userInfo.value), (data: BaselistResult<UserInfo>) => {
    if (data.success) {
      tableData1.value = data.data
      pageInfo1.value = data.page
      console.log(tableData1.value)
    }
  })
}

function getDa() {
  L12030.get('/user', Tools.concatJson(pageInfo2.value, user.value), (data: BaselistResult<UserInfo>) => {
    if (data.success) {
      tableData2.value = data.data
      pageInfo2.value = data.page
      console.log(tableData2.value)
    }
  })
}
getData()
getDa()
</script>

<style lang="scss" scoped>
.el-container {
  flex-wrap: wrap;
  align-items: flex-start;
}

.common-layout {
  height: 100%;
  & > .el-container {
    height: 100%;
    & > .el-aside {
      height: 100%;
      background: #545c64;
    }
  }
}
</style>
